import { Link } from 'react-router-dom';
import { ClockIcon, ArrowRightIcon } from 'lucide-react';
const NewsWire = () => {
  const news = [{
    id: 'nvidia-ai',
    title: 'NVIDIA announces new AI accelerators with 5x performance boost',
    time: '2 hours ago',
    category: 'Industry'
  }, {
    id: 'apple-event',
    title: 'Apple schedules Spring event, new iPad Pro models expected',
    time: '5 hours ago',
    category: 'Events'
  }, {
    id: 'samsung-fold',
    title: 'Samsung Galaxy Z Fold 5 leaks reveal radical new hinge design',
    time: '8 hours ago',
    category: 'Leaks'
  }, {
    id: 'intel-raptor',
    title: 'Intel Raptor Lake refresh CPUs get official pricing and release date',
    time: '12 hours ago',
    category: 'Hardware'
  }, {
    id: 'meta-ar',
    title: 'Meta partners with Ray-Ban for next-gen AR glasses',
    time: '1 day ago',
    category: 'AR/VR'
  }, {
    id: 'tesla-ai',
    title: 'Tesla reveals new Full Self-Driving beta with enhanced neural networks',
    time: '1 day ago',
    category: 'Automotive'
  }, {
    id: 'google-pixel',
    title: 'Google Pixel 8 Pro camera samples leak ahead of launch',
    time: '2 days ago',
    category: 'Mobile'
  }, {
    id: 'amd-rdna',
    title: 'AMD RDNA 4 GPUs reportedly delayed to early 2025',
    time: '2 days ago',
    category: 'Hardware'
  }, {
    id: 'microsoft-copilot',
    title: 'Microsoft integrates Copilot AI into Windows 11 Start menu',
    time: '3 days ago',
    category: 'Software'
  }, {
    id: 'spacex-starlink',
    title: 'SpaceX launches new Starlink satellites with improved bandwidth',
    time: '3 days ago',
    category: 'Space Tech'
  }];
  return <div className="card p-6 h-full flex flex-col">
      <div className="flex justify-between items-center mb-6">
        <h2 className="text-xl font-bold font-display">News Wire</h2>
        <Link to="/insights" className="text-[#4361ee] hover:text-[#06d6a0] transition-colors">
          <ArrowRightIcon size={18} />
        </Link>
      </div>
      <div className="flex-1 overflow-y-auto news-wire-scroll max-h-[480px]">
        <div className="space-y-5 pr-2">
        {news.map(item => <Link key={item.id} to={`/insights/${item.id}`} className="block group">
            <div className="flex items-start">
              <span className="news-wire h-full py-2 mr-4"></span>
              <div>
                <div className="flex items-center mb-1">
                  <span className="text-xs font-medium px-2 py-0.5 rounded-full bg-[#151518] text-[#4361ee] mr-2">
                    {item.category}
                  </span>
                  <span className="text-xs text-[#8a8f98] flex items-center">
                    <ClockIcon size={12} className="mr-1" />
                    {item.time}
                  </span>
                </div>
                <h3 className="text-sm group-hover:text-[#4361ee] transition-colors">
                  {item.title}
                </h3>
              </div>
            </div>
          </Link>)}
        </div>
      </div>
    </div>;
};
export default NewsWire;